<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./my/css/bs-ext.css">
<link rel="stylesheet" href="./my/css/title.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- <script src="./my/js/infomodal.js"></script> -->
<script src="./my/js/bs-ext.js"></script>

<script src="./my/js/title.js"></script>
</head>
<body>
	<div class="">
		<nav>
			<ul class="pagination square">
				<li><a href="#">&laquo;</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">&raquo;</a></li>
			</ul>
		</nav>
		<nav>
			<ul class="pagination red">
				<li><a href="#">&laquo;</a></li>
				<li class="active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li  class="disabled"><a href="#">&raquo;</a></li>
			</ul>
		</nav>
		<button class="btn btn-warning" data-toggle="infomodal"
		 data-target="#disabledPopup" data-backdrop="static">禁用</button>
		<!-- Info弹框 -->
		<div id="disabledPopup" class="modal fade" data-close-after-confirm="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">删除提示 </div>
		      <div class="modal-body">你确认要删除该条信息吗？ </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-success" data-info="confirm">确认</button>
		        <button type="button" class="btn btn-dnager" data-info="cancel">取消</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>
	
	<!--  -->
	<div class="title-group bg-amber" data-toggle="title">
		<div class="title-group-title">Tilte</div>
		<div class="title bg-red">A区</div>
		<div class="title-group-title">B区</div>
		<div class="title-group-title">C区</div>
		<div class="title-group-title">D区</div>
	</div>
	<div class="title-group double bg-amber" data-toggle="title"
	data-direction="slideLeftRight" data-period="700" data-duration="3000"
	data-easing="doubleSqrt">
		<div class="title-content bg-red">A区</div>
		<div class="title-content bg-green">B区</div>
		<div class="title-content bg-orange">C区</div>
		<div class="title-content bg-red">D区</div>
	</div>
</body>
</html>